<template>
  <div class="lastest_con">
      <h3 class="title">各地发布</h3>
      <div class="border"></div>
      <div class="scroll">
           <vue-seamless-scroll class="seamless-warp" :data="newsData" :class-option="classOption" >
                <ul class="scroll_con" >
                    <li class="scroll_item" v-for="(item,index)  in  newsData" :key="index">
                        <p>{{item.title}}</p>
                        <div class="scroll_time">
                            <span>发布时间：{{item.created_at}}</span>
                            <span>来源：{{item.name}}</span>
                        </div>
                    </li>
                </ul>
            </vue-seamless-scroll>
      </div> 
  </div>
</template>

<script>
export default {
    data(){
        return{
            newsData:[],
        }
    },
    computed:{
         classOption() {
            return {
                step: 0.4,
                direction: 1,
                waitTime: 2000
            };
        }
    },
    created(){
        this.getNews()
    },
    methods:{
        async getNews(){
            const res= await this.$http.get('/data4/1/log')
            this.newsData=res.data
        } 
    }
}
</script>

<style lang="less" scoped>
    .lastest_con{
        width: 583px;
        height: 420px;
        background: linear-gradient(180deg,rgba(36,194,255,0.10), rgba(36,194,255,0.00));
        border: 3px solid #24c2ff;
        .title{
            color: #24c2ff;
            font-size: 16px;
            padding: 15px 0 15px 20px;
            font-weight: 500;
        }
        .border{
            width: 100%;
            height: 1px;
            background: #04130f;
        }
        .scroll{
            width: 100%;
            height: 360px;
            overflow: hidden;
            .scroll_con{
                overflow: hidden;
                height: 100%;
                padding: 0 20px;
                .scroll_item{
                    padding: 12px 0 12px 12px;
                    background-color: #154561;
                    color:#24C2FF;
                    border-radius: 5px;
                    margin-bottom: 12px;
                    .scroll_time{
                        margin-top: 10px;
                        span{
                            font-size: 14px;
                            &:last-child{
                                margin-left: 20px;
                            }
                        }
                    }
                }
            }
        }

    }
</style>